// 签到
<template>
    <div class="loglist">
        <div class="work-title">
            <div>
                <el-button size="mini" @click="backClick">返回</el-button>
            </div>
            <div>
                签到管理
            </div>
            <div></div>
        </div>
        <div class="work-content">
            <div class="workContent-left">
                <ul>
                    <li :class="{'workContentL-Li':true,WorkContentSelectli:isWorkContentSelectli == index}" v-for="(item,index) in sideLists"
                        :key="index" @click="sideListsClick(index)">
                        {{item.name}}
                    </li>
                </ul>
            </div>
            <div class="workContent-right">
                <router-view></router-view>
            </div>
        </div>
        <div class="signManageMapBig" id='containers' v-show='screenShow'>
        </div>
        <div @click='realTimeDataClick()' :class="{realTimeData:!realTimeDataShow,realTimeDataOk:realTimeDataShow}" v-show='screenShow'>实时数据</div>
        <div @click='closeScreenClick()' class="closeScreen" v-show='screenShow'>退出全屏</div>

    </div>
</template>
<script>
    import { mapActions } from "vuex";
    export default {
        data() {
            return {
                realTimeDataShow: false,//实时数据
                screenShow: false,   //全屏
                deptsIdVals: '',    //部门id
                memberIdVals: '',    //成员id
                monthvalue: '',       //时间
                isWorkContentSelectli: 0, //选中路由侧栏样式
                sideLists: [
                    { name: "日常签到", path: "signManage" },
                    { name: "外出签到", path: "signOut" }
                    // { name: "签到设置", path: "signSetting" }
                ], // 侧栏路由
                signShow: true,
                list: [],//日常签到用户足迹
                clock: '',  //计时器
                signIfShow: 'every', //判断签到是日常还是外出
            };
        },

        filters: {},
        mounted() {
            var self = this
            mapFun.$on('openEverydayScreenFun', (obj) => {  //日常签到
                self.signIfShow = 'every'
                self.memberIdVals = obj.memberIdVals
                self.deptsIdVals = obj.deptsIdVals
                self.monthvalue = obj.monthvalue
                self.getEverydayList()
            })
            mapFun.$on('openOutScreenFun', (obj) => {  //外出签到
                self.signIfShow = 'out'
                self.memberIdVals = obj.memberIdVals
                self.deptsIdVals = obj.deptsIdVals
                self.monthvalue = obj.monthvalue
                self.getOutList()
            })
            mapFun.$on("closeScreen", () => { //路由变化
                self.screenShow = false
                window.clearInterval(window.clock);
                self.realTimeDataShow = false
            })
        },
        created: function () {
            var pathOne = this.$route.path.split("/")[3];
            if (pathOne == "signManage") {
                this.isWorkContentSelectli = 0;
            } else if (pathOne == "signOut") {
                this.isWorkContentSelectli = 1;
            } else if (pathOne == "signSetting") {
                this.isWorkContentSelectli = 2;
            } else if (pathOne == "signAddSetting") {
                this.isWorkContentSelectli = 2;
            }
        },
        watch: {},
        methods: {
            // 路由点击
            sideListsClick(index) {
                this.isWorkContentSelectli = index;
                var pathStr = this.sideLists[index].path;
                this.$router.push({
                    path: "/home/sign/" + pathStr
                });
            },
            //日常签到
            manageClick() {
                this.signShow = true;
                var pathStr = "signManage";
                this.$router.push({
                    path: "/home/sign/" + pathStr
                });
            },
            //外出签到
            outClick() {
                this.signShow = false;
                var pathStr = "signOut";
                this.$router.push({
                    path: "/home/sign/" + pathStr
                });
            },
            // 返回
            backClick() {
                this.$router.push({
                    path: "/home/work"
                });
                sessionStorage.removeItem("navIndex");
            },
            //实时数据
            realTimeDataClick() {
                if (this.realTimeDataShow == false) {
                    this.realTimeDataShow = true
                    if (this.signIfShow == "every") {
                        this.getEverydayList()
                        window.clock = setInterval(() => {
                            this.getEverydayList()
                        }, 60000)
                    } else if (this.signIfShow == "every") {
                        this.getOutList()
                        window.clock = setInterval(() => {
                            this.getOutList()
                        }, 60000)
                    }
                } else {
                    return
                }
            },
            //退出地图全屏
            closeScreenClick() {
                this.screenShow = false
                this.realTimeDataShow = false
                window.clearInterval(window.clock);
            },
            //  获取日常签到数据
            getEverydayList() {
                var self = this
                self.getsignWebSignDailyfindMemberDayPosition(JSON.stringify({
                    orgId: sessionStorage.getItem('ORGID'),
                    signDate: self.monthvalue,
                    deptIds: self.deptsIdVals,
                    userIds: self.memberIdVals,
                })).then(data => {
                    if (data.statusCode = 200) {
                        self.list = []
                        if (data.data) {
                            data.data.forEach(ele => {
                                self.list.push({
                                    name: ele.name,
                                    profile: ele.profile ? ele.profile : null,  //头像
                                    address: ele.address,    //地址
                                    position: [ele.lng, ele.lat],//经纬度
                                    imgUrls: ele.imgUrls ? ele.imgUrls.split(',') : [],//详情图片
                                    time: ele.createTime,
                                    remark: ele.remark ? ele.remark : null,
                                })
                            })
                            self.getMapFun()
                        } else {
                            self.getMapFun()
                        }
                    } else {
                        self.$message({
                            type: "info",
                            message: data.statusMessage
                        });
                    }
                }).catch(msg => {
                    self.$message({
                        type: "info",
                        message: "服务器异常"
                    });
                })
            },
            //  获取外出签到数据
            getOutList() {
                var self = this
                self.getsignWebSignOutfindMemberDayPosition(JSON.stringify({
                    orgId: sessionStorage.getItem('ORGID'),
                    signDate: self.monthvalue,
                    deptIds: self.deptsIdVals,
                    userIds: self.memberIdVals,
                })).then(data => {
                    if (data.statusCode = 200) {
                        self.list = []
                        if (data.data) {
                            data.data.forEach(ele => {
                                self.list.push({
                                    name: ele.name,
                                    profile: ele.profile ? ele.profile : null,  //头像
                                    address: ele.address,    //地址
                                    position: [ele.lng, ele.lat],//经纬度
                                    imgUrls: ele.imgUrls ? ele.imgUrls.split(',') : [],//详情图片
                                    time: ele.createTime,
                                    remark: ele.remark ? ele.remark : null,
                                })
                            })
                            self.getMapFun()
                        } else {
                            self.getMapFun()
                        }
                    } else {
                        self.$message({
                            type: "info",
                            message: data.statusMessage
                        });
                    }
                }).catch(msg => {
                    self.$message({
                        type: "info",
                        message: "服务器异常"
                    });
                })
            },
            //地图
            getMapFun() {
                var self = this
                var arr = self.list
                //初始化地图对象，加载地图
                if (arr.length > 0) {
                    var centers = self.list[0].position
                    var map = new AMap.Map("containers", { resizeEnable: true, zoom: 16, center: centers });
                    var infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(0, -30) });   //窗体
                    for (var i = 0, marker; i < arr.length; i++) {
                        var marker
                        if (arr[i].profile) {
                            marker = new AMap.Marker({
                                map: map,
                                position: arr[i].position,
                                content: `<div class="markerMain"><div class="markerMain-s"><div class="markerMain-n"><img src="${arr[i].profile}" alt=""></div></div></div>`
                            });
                            var imgStr = ''
                            arr[i].imgUrls.forEach(ele => {
                                if (ele) {
                                    imgStr += `<img src="${ele}">`
                                }
                            })
                            var remakeStr = ''
                            if (arr[i].remark) {
                                remakeStr =
                                    `<div class='signMapSite'>
                                    <div class='signMapSiteL'>备注： </div>
                                    <div class='signMapSiteR'>${arr[i].remark}</div>
                                </div>`
                            }
                            var timeStr = ''
                            var standardTime = new Date(arr[i].time * 1);
                            var y, m, d, h, f;
                            y = standardTime.getFullYear();
                            m = standardTime.getMonth() + 1;
                            m = m > 9 ? m : "0" + m;
                            d = standardTime.getDate();
                            d = d > 9 ? d : "0" + d;
                            h = standardTime.getHours();
                            h = h > 9 ? h : "0" + h;
                            f = standardTime.getMinutes();
                            f = f > 9 ? f : "0" + f;
                            timeStr = y + "-" + m + "-" + d + " " + h + ":" + f;
                            marker.content =
                                `<div class='signMapBox'>
                                <div class='signMapTitle'>${arr[i].name}的签到详情</div>
                                <div class='signMapTime'>
                                    ${timeStr}
                                </div>
                                <div class='signMapSite'>
                                    <div class='signMapSiteL'>地点：</div>
                                    <div class='signMapSiteR'>${arr[i].address}</div>
                                </div>
                                   ${remakeStr}
                                <div class='signMapImg'>
                                   ${imgStr}
                                </div>
                            </div>`;
                            marker.on('click', markerClick);
                            marker.emit('click', { target: marker });
                        }
                        else {
                            let nameStr = "";
                            if (arr[i].name.length > 2) {
                                nameStr = arr[i].name.slice(arr[i].name.length - 2, arr[i].name.length);
                            } else {
                                nameStr = arr[i].name;
                            }
                            marker = new AMap.Marker({
                                map: map,
                                position: arr[i].position,
                                content: `<div class="markerMain"><div class="markerMain-s"><div class="markerMain-n">${nameStr}</div></div></div>`
                            });
                            var imgStr = ''
                            arr[i].imgUrls.forEach(ele => {
                                if (ele) {
                                    imgStr += `<img src="${ele}">`
                                }
                            })
                            var remakeStr = ''
                            if (arr[i].remark) {
                                remakeStr =
                                    `<div class='signMapSite'>
                                    <div class='signMapSiteL'>备注： </div>
                                    <div class='signMapSiteR'>${arr[i].remark}</div>
                                </div>`
                            }
                            var timeStr = ''
                            var standardTime = new Date(arr[i].time * 1);
                            var y, m, d, h, f;
                            y = standardTime.getFullYear();
                            m = standardTime.getMonth() + 1;
                            m = m > 9 ? m : "0" + m;
                            d = standardTime.getDate();
                            d = d > 9 ? d : "0" + d;
                            h = standardTime.getHours();
                            h = h > 9 ? h : "0" + h;
                            f = standardTime.getMinutes();
                            f = f > 9 ? f : "0" + f;
                            timeStr = y + "-" + m + "-" + d + " " + h + ":" + f;
                            marker.content =
                                `<div class='signMapBox'>
                                <div class='signMapTitle'>${arr[i].name}的签到详情</div>
                                <div class='signMapTime'>
                                    ${timeStr}
                                </div>
                                <div class='signMapSite'>
                                    <div class='signMapSiteL'>地点：</div>
                                    <div class='signMapSiteR'>${arr[i].address}</div>
                                </div>
                                    ${remakeStr}
                                <div class='signMapImg'>
                                   ${imgStr}
                                </div>
                            </div>`;
                            marker.on('click', markerClick);
                            marker.emit('click', { target: marker });
                        }
                    }
                    function markerClick(e) {
                        infoWindow.setContent(e.target.content);
                        infoWindow.open(map, e.target.getPosition());
                        map.setFitView();
                    }
                } else {
                    var map = new AMap.Map("containers", { resizeEnable: true, zoom: 15 });
                }
                this.screenShow = true
            },
            ...mapActions([
                'getsignWebSignDailyfindMemberDayPosition',
                'getsignWebSignOutfindMemberDayPosition'
            ])
        }
    };
</script>
<style scoped>
    .WorkContentSelectli {
        background-color: #f1f8ff;
    }

    .WorkContentSelectli::after {
        position: absolute;
        top: 0;
        right: 0;
        width: 3px;
        background-color: #38adff;
        height: 45px;
        content: "";
    }

    .workContentL-Li {
        width: 100%;
        height: 45px;
        cursor: pointer;
        text-align: center;
        line-height: 45px;
        overflow: hidden;
        position: relative;
    }

    .workContent-left ul {
        display: flex;
        flex-wrap: wrap;
        margin-top: 10px;
    }

    .workContent-left {
        width: 210px;
        min-height: 500px;
        overflow: hidden;
        border-right: 1px solid #ccc;
    }

    .workContent-right {
        width: calc(100% - 210px);
        min-height: 500px;
        overflow: hidden;
    }

    .work-content {
        min-height: 500px;
        width: 100%;
        display: flex;
        justify-content: space-between;
        overflow: hidden;
    }

    .work-title>div:nth-child(1) {
        width: 58px;
        height: 26px;
        border-radius: 4px;
        text-align: center;
        font-size: 14px;
        color: #333;
        line-height: 26px;
        margin-left: 15px;
        cursor: pointer;
    }

    .work-title>div:nth-child(2) {
        font-size: 14px;
        color: #333;
        margin-right: 15px;
    }

    .work-title {
        height: 55px;
        background-color: #fff;
        width: 100%;
        overflow: hidden;
        border-bottom: 1px solid #ccc;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .monthTop {
        width: calc(100%-88px);
        height: auto;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        margin-left: 44px;
        margin-right: 44px;
        padding-top: 10px;
        /* padding-bottom: 12px; */
        color: #303030;
        font-size: 14px;
        display: flex;
    }

    .monthTopManage,
    .monthTopOut {
        text-align: center;
        width: 100px;
        height: 36px;
        line-height: 36px;
        cursor: pointer;
        border-radius: 4px;
        margin-bottom: 15px;
    }

    .monthTopManage:hover,
    .monthTopOut:hover {
        background: #38adff;
        color: white;
    }

    .monthTopShow {
        background: #38adff;
        color: white;
        width: 100px;
        height: 36px;
    }

    .monthTop>div {
        margin-right: 15px;
    }

    .loglist {
        width: 100%;
        background-color: #fff;
        min-height: 600px;
        display: flex;
        overflow: hidden;
        flex-direction: column;
        flex-wrap: wrap;
        border-radius: 5px;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    }

    .signManageMapBig {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 1000;
    }

    .realTimeData {
        width: 90px;
        height: 32px;
        position: fixed;
        left: 50px;
        top: 50px;
        line-height: 32px;
        text-align: center;
        z-index: 1001;
        border: 1px solid black;
        background: white;
        border-radius: 4px;
        cursor: pointer;
    }

    .realTimeDataOk {
        width: 90px;
        height: 32px;
        position: fixed;
        left: 50px;
        top: 50px;
        line-height: 32px;
        text-align: center;
        z-index: 1001;
        background: #38adff;
        border-radius: 4px;
        cursor: no-drop;
        color: white;
    }

    .closeScreen {
        width: 90px;
        height: 32px;
        position: fixed;
        right: 50px;
        bottom: 50px;
        line-height: 32px;
        text-align: center;
        z-index: 1001;
        border: 1px solid black;
        background: white;
        border-radius: 4px;
        cursor: pointer;
    }

    .mapBox {
        width: 100px;
        height: 100px;
        background: red;
    }
</style>